<template>
  <div style="min-height: 100vh;" class="profile">
    <van-nav-bar
        style="position:sticky;background-color:#3196fa;color:#fff" 
        title="个人信息"
        left-arrow
        class="profile-nav"
        @click-left="onClickLeft"
        
    />
    <input type="file" ref="upfile" @change="changeFile" hidden>
    <van-cell-group>
        <van-cell title="头像" @click="$refs.upfile.click()"  arror-right is-link  center >
            <template #default>
                <div style="display:flex;align-items:center;justify-content: flex-end;">
                    <img style="width:40px;height:40px;border-radius:50%;" :src="photo" />
                </div>
            </template>
        </van-cell>
        <van-cell title="昵称"  @click="nickPropShow=true" is-link  :value="nickname"/>
        <van-cell title="性别"  @click="genderShow=true" is-link  :value="genderColumns[genderDefaultIndex]"/>
        <van-cell title="生日" :value="currentDatestr" is-link  @click="birthdayShow=true"/>
    </van-cell-group>
    <!-- 遮罩 -->
    <van-overlay :show="genderShow||birthdayShow" @click="genderShow=birthdayShow = false" />
    <!-- 裁切图片 -->
    <van-popup v-model="nickPropShow" position="bottom" >

    </van-popup>
    <!-- 昵称修改弹窗 -->
    <van-popup v-model="nickPropShow" position="right" :style="{ width:'100%',height: '100%' }" >
       <van-nav-bar
            style="position:sticky;background-color:#3196fa;color:#fff" 
            title="编辑昵称"
            left-arrow
            @click-left="nickPropShow=false"
        />
        <div style="padding:10px">
            <van-field
                v-model="nickname"
                rows="3"
                style="background:rgb(245 245 245)"
                autosize
                type="textarea"
                placeholder="请输入昵称"
            />
            <van-button
                round
                style="width:95%;margin-top:20px;position:fixed;color:white;bottom:20px;background-color: #1896ef;border: 0.02667rem solid #1896ef;"
                size="large"
                @click="nicknameSubmit" >
                确定
            </van-button>
        </div>
    </van-popup>
    <!-- 性别选择器 -->
    <van-picker
        v-show="genderShow"
        show-toolbar
        :columns="genderColumns"
        @confirm="genderConfirm"
        @cancel="onCancel"
    />
    <!-- 生日选择器 -->
    <van-datetime-picker
        v-show="birthdayShow"
        v-model="currentDate"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="birthdayConfirm"
        @cancel="onCancel"
    />
  </div>
</template>

<script>
import {getuserprofile,setuserprofile,setuserphoto} from '@/api/user'
export default {
    name:"userprofile",
    props:{
       
    },
    data(){
        return{
            nickPropShow:false,
            genderShow:false,
            genderColumns: ['男', '女'],
            birthdayShow:false,
            minDate: new Date(1960, 0, 1),
            maxDate: new Date(2025, 11, 31),
            currentDate: new Date(2021, 0, 17),
            genderDefaultIndex: 0,
            currentDatestr:'2021-01-17',
            nickname:'',
            photo:''
        }
    },
    watch:{
    },
    computed:{
    },
    //挂载
    mounted(){
        console.log(123)
        this.getprofile();
    },
    methods:{
        async getprofile(){
            await getuserprofile().then(res=>{
                const {data}=res.data;
                console.log(data)
                this.nickname=data.name;
                this.photo=data.photo;
                this.currentDatestr=data.birthday;
                this.genderDefaultIndex=data.gender
            })
        },        
        async changeFile(){
            const file = this.$refs.upfile.files[0];
            const formData=new FormData()
            formData.append("photo",file);
            const {data}=await setuserphoto(formData)
            if(data.message=='OK'){
                this.photo=data.data.photo
                this.$toast.success('上传成功')
            }else{
                this.$toast.fail('上传失败')
            }
            // const imgurl=window.URL.createObjectURL(file);
            // this.photo=imgurl
        },

        onClickLeft(){
            this.$router.go(-1)
        },
        genderConfirm(value, index){
            this.genderDefaultIndex=index;
            this.setprofile()
            this.onCancel()
        },
        birthdayConfirm(value, index){
            console.log(value)
            this.currentDatestr=value.getFullYear()+'-'+(value.getMonth()+1)+'-'+value.getDate()
            this.setprofile()
            this.onCancel()
        },
        onCancel(){
            this.genderShow=false
            this.birthdayShow=false
        },
        nicknameSubmit(){
            console.log(this.nickname)
            this.setprofile()
            this.nickPropShow=false
        },
        // 提交修改
        async setprofile(){
            const data={
                name:this.nickname,
                gender:this.genderDefaultIndex,
                birthday:this.currentDatestr,
                real_name:'000',
                intro:'000',
            }
            await setuserprofile(data).then(res=>{
                console.log(res)
            })
        }
    }
}
</script>

<style>
.profile-nav .van-nav-bar__title{color: white;}
.profile .van-nav-bar .van-icon{color: white;}
.profile .van-picker{
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 99;
    background: white;
}
</style>